/* 
    Sharamag Publishing Engine Beta One
    This is released under the GPL License
    Version 1.0 beta by
    Gerry Straathof, 4 yr MADT student
    Alberta College of Art and Design

    Please assist with the development of this engine
    by making your enhancements part of the 
    ultimate Sharamag project.
    
    August 17, 2010.
    
    Developed for use with Sencha v 0.93
    http://www.sencha.com

*/
// set up the fonts to use
/*          Cufon.replace('.test', { fontFamily: 'techniqueo' });
			Cufon.replace('.magazine', { fontFamily: 'veggiebold' });
            Cufon.replace('h4', { fontFamily: 'techniques' });
            Cufon.replace('logo-inline', { fontFamily: 'techniqueo' });*/
/*
var p = document.getElementsByTagName('p')[0];
p.onclick = function() {
 // Trigger the `onhover` event on the paragraph
 p.onhover.call(p);
};
*/
var showTouch = document.getElementsByTagName('menu_text');
for(var i = 0; i < showTouch.length; i++){
    showTouch[i].addEventListener("touchstart", function(){this.className = 'hover';}, false);
    showTouch[i].addEventListener("touchend", function(){this.className = "";}, false);
};


//global variables for font size (need to change for ipad/screen use)
var min=12;
var max=24;

//increase the font size of all article text?
function increaseFontSize() {
   var p = document.getElementsByTagName('p');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 16;
      }
      if(s!=max) {
         s += 2;
      }
      p[i].style.fontSize = s+"px"
   }
}

//decrease the font size of all article text?
function decreaseFontSize() {
   var p = document.getElementsByTagName('p');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 16;
      }
      if(s!=min) {
         s -= 2;
      }
      p[i].style.fontSize = s+"px"
   }   
}

//used to refresh after initial load


Ext.setup({
    
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: true,
    monitorOrientation:true,
    onReady: function() {
    
        var firstload=true;
        
/*        setTimeout(function(){
            if (!firstload) {
                Ext.getBody().mask(false, '<div class="loading">Loading&hellip;</div>');
            }
        }, 1);*/
        
        onRender: {
            if (firstload){        
                Ext.repaint();
                firstload=false;
                window.doneloading=true;
                // alert("here");
                window.scrollTo(0,0);
             }};
        
        // read menu items from document
        var items = [];
        Ext.select('.article-title').each(function(el){
           items.push({
               html: '<div class="menu_text">' + el.dom.innerHTML + '</div>',
           });
        });

        //create the main popup menu
        var mainmenuTb = new Ext.Toolbar({
            dock: 'top',//baseCls: 'x-plain',
            defaults: {
                ui:'metal'
                },
            layout: {
                pack:'center'
            },
            html:'<p style="text-align: center;font-size:30px;"><a href="javascript:decreaseFontSize();">  -  </a><logo-inline style="color:white;font-size:20px;">  test  </logo-inline><a href="javascript:increaseFontSize();" style="color:white;font-size:30px;">  +  </a></p>'
                //title:'<logo-inline>test</logo-inline> menu'

            });
        
        // create a floating menu on double-click
        var mainmenu = new Ext.Panel({
                showAnimation:{type: 'pop'},
                style: 'opacity: 0.75',
                floating: true,
                //draggable: true,
                modal: false,
                centered: true,
                width: 280,
                dockedItems: mainmenuTb,
                scroll: 'vertical',
                baseCls: 'x-plain',
                items: [{
                    items: items,
                }]
        });
        
        // get the value of any menu choice, goto card
        window.change = function change_card (card_number){
            var current_card = publication.getActiveIndex();
            //alert(card_number,current_card);
            if (current_card > card_number) {
                publication.setCard(card_number,{type: 'slide', direction: 'right', duration: '500', easing: 'cubic-bezier(0.4, .75, 0.5, .95)'});
            } else if (current_card < card_number) 
                publication.setCard(card_number,{type: 'slide', direction: 'left', duration: '500', easing: 'cubic-bezier(0.4, .75, 0.5, .95)'});
                
            //alert(card_number); 
            };

        // Create a Carousel of Items
        var publication = new Ext.Carousel({
            indicator: false,
            layout:'card',
            autoDestroy:false,
            app: {},
            items: [{//this is a static image and cover title
                title: 'Tab 0',
                layout: 'fit',
                contentEl: 'backdrop1',
                items: [{// Don't scroll the Cover of the magazine
                // scroll: 'vertical',
                contentEl: 'c1'
                }]
            }, {//This article has one image throughout
                title: 'Tab 1',
                layout: 'fit',
                disabled: 'true',
                contentEl: 'backdrop2',
                items: [{
                scroll: 'vertical',
                contentEl: 'c2',
                }]
            }, { // This article has a changeable image
                title: 'Tab 2',
                layout: 'fit',
                items: [{
                scroll: 'vertical',
                contentEl: 'c3'
                }]
            },{ // this is empty 'article' to view images
                title: 'Tab 3',
                layout: 'fit',
            }, {// this article has no image set in it
                title: 'Tab 4',
                layout: 'fit',
                items: [{
                scroll: 'vertical',
                contentEl: 'c4'
                }]
            }, {// this article has an one image throughout
                title: 'Tab 5',
                layout: 'fit',
                contentEl: 'backdrop5',
                items: [{
                cls: 'article',
                scroll: 'vertical',
                contentEl: 'c5'
                }]
            }]
        }); // eo publication setup

        var min = 12,
            max = 25,
            current = 16;
            
        // Select all elements with a class of text, set the font size to the default
        Ext.select('p').setStyle('font-size', current + 'px');
        // bind an event on the document body for pinch
        Ext.getBody().on('pinch', function(event){
            // interrogate the event, see if the pinch is smaller or bigger
            if(event.deltaScale > 0){
                ++current;
                current = Math.min(max, current);    
            }else{
                --current;
                current = Math.max(min, current);
            }
            // set the text as appropriate
        Ext.select('p').setStyle('font-size', current + 'px');


            
        }, null, {buffer: 10});

        // draw the carousel
        new Ext.Panel({
            fullscreen: true,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            defaults: {
                flex: 2
            },
            //
            items: [publication],
            // add listener for doubletap
            listeners: {            
                render: function(c){
                    c.body.on('doubletap', function(e, t){
                        //handle the double tap
                        mainmenu.show();
                        // c.doComponentLayout();
                    }, c); 
                }       
            
            }

        });// eo draw carousel
       

        
    }, // eo function onReady
  


}); // eo Ext.Setup

